<template>
    <view class="select-store">
        <view class="store-list">
            <view class="store-item" v-for="(store, index) in stores" :key="index" @click="selectStore(store)">
                <view class="store-info">
                    <image class="store-icon" :src="store.icon" alt="Store Icon"></image>
                    <text class="store-name">{{ store.name }}</text>
                </view>
                <view class="store-status">
                    <image class="store-icon" :src="store.icon" alt="Store Icon"></image>
                    <text class="store-address">{{ store.address }}</text>
                </view>
                
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            stores: [
                {
                    icon: '/static/image.png',
                    name: '高伟炒鸡店',
                    address: '西藏自治区山南地区隆子县隆子镇11幢223室'
                }
            ]
        };
    },
    methods: {
        selectStore(store) {
            console.log('Selected store:', store);
            // Add your logic to handle the selected store
        }
    }
};
</script>

<style scoped>
.select-store {
    padding: 20px;
}

.store-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.store-item {
    display: flex;
    flex-direction: column;
    align-items: self-start;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.store-icon {
    width: 25px;
    height: 25px;
    margin: 10px;
}

.store-info {
    flex: 1;
    display: flex;
    align-items: center;
}

.store-name {
    font-size: 16px;
    font-weight: bold;
}

.store-status {
    display: flex;
    align-items: center;
}

.store-address {
    font-size: 14px;
    color: #666;
}
</style>